{extend name="layout/layout" /}

{block name="navbar"}{/block}
{block name="style"}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
	<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"> -->
	<style>
		.recommend{
			background: #fff;
			margin-top: 5px;
			padding-bottom: 20px;
		}

		.recommend-title{
			line-height: 40px;
			color:#fff;
			border-bottom: 1px solid #ccc;
			background: url('/assets/mobile/images/index_bg.png');
		}

		.recommend .mui-row{
			display: flex;
			flex-wrap: wrap;
			width: 100%;
		}	

		.goods-name{
			height: 42px;
			font-size:12px;
			overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
			text-align: left;
		}

		.recommend p{
			margin-bottom: 5px;
		}

		.recommend .mui-col-xs-6{
			padding: 5px;
			height: 280px;
			background: #fff;
		}

		.recommend img{
			height: 197px;
		}


		.recommend .price{
			color:#e60012;
		}

		/*优惠券列表开始*/
			.coupon-list{
				background: #fff;
				padding: 10px 20px;
			}

			.coupon-list .title{
				line-height: 30px;
				border-bottom: 1px solid #eee;
			}

			#slider.mui-fullscreen{
				position: relative;
				top: 0px;
			}

			#slider .mui-control-item{
				line-height: 20px;
				background: #FFEEE4;
				color: #FC5976;
				text-align: left;
				width: 200px;
				margin-right: 20px;
				padding: 20px 10px;
				border-radius: 10px;
			}

			#slider .mui-control-item *{
				font-size: 10px;
			}

			#slider .mui-control-item .amount{
				color: #FF0134;
				font-size: 20px;
			}

			.mui-slider-indicator.mui-segmented-control{
				height: 125px;
				margin-top: 10px;
			}
		/*优惠券列表结束*/
	</style>
{/block}

{block name="main"}
	<div class="index" v-cloak>
			
	<!-- 	<div class="mui-slider">
			<div class="mui-slider-group">
				<div class="mui-slider-item" v-for="ban in banner"><a href="#"><img :src="ban.img" /></a></div>
			</div>
		</div> -->

		<div class="swiper-container banner-swiper">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide mui-text-center" v-for="ban in banner">
		        	<img :src="ban.app_image" class="img-responsive" />
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		</div>

		<!-- 优惠券列表开始 -->
			<div id="slider" class="mui-slider mui-fullscreen coupon-list">
				<div class="title">优惠券</div>
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<div class="mui-control-item" v-for="coupon in coupons" @tap='receive_coupon(coupon)'>
							<div class="amount">￥{{coupon.amount}}</div>	
							<div class="condition">满{{coupon.min_amount}}可用</div>
							<div class="time">{{coupon.start_time}}</div>
							<div class="time">至 {{coupon.end_time}}</div>
						</div>
					</div>
				</div>
            </div>
		<!-- 优惠券列表结束 -->

		<!-- 为你推荐开始 -->
		<div class="mui-row  recommend">
			<div class="recommend-title mui-text-center">为您推荐</div>
			<div class="mui-row">
				<div class="mui-col-xs-6" v-for="rec in recommend">
					<a :href="'/mobile/goods/detail/id/'+rec.id">
						<img :src="rec.original_image" class="img-responsive" alt="">
						<p class="goods-name">{{rec.goods_name}}</p>
						<p class="">
							<b class="price">￥{{rec.shop_price}}</b>
							<del class="del-price mui-pull-right">￥{{rec.market_price}}</del>
							
						</p>
					</a>
				</div>
			</div>
		</div>
		<!-- 为你推荐结束 -->


	</div>
{/block}

{block name="script"}
 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script> -->
	<script>
		mui.init({});

		var indexVue = new Vue({
			el:'.index',
			data: {
				business_id : "{:input('id')}",
				banner: [],
				recommend: [],
				coupons:[]
			},
			mounted: function(){
				this.getIndexData();
				this.getCoupon();
			},
			methods:{
				getIndexData: function(){
					layer.open({
						type: 2,
						shadeClose: false,
					});
					var url =  'seller/index';
					var that = this;
					request(that, {'url': url, 'data': {'id':that.business_id}}, function(res){
						if(res.code == 200) {
							layer.closeAll();
							that.banner = res.data.banner;
							that.recommend = res.data.recommend;
							that.bannerSwiper();
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				getCoupon: function(){
					layer.open({
						type: 2,
						shadeClose: false,
					});
					var url =  'seller/coupon';
					var that = this;
					request(that, {'url': url, 'data': {'id':that.business_id}}, function(res){
						if(res.code == 200) {
							layer.closeAll();
							that.coupons = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				bannerSwiper:function(){
                    var bannerSwiper = new Swiper('.banner-swiper', {
                        observer:true, //修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,//修改swiper的父元素时，自动初始化swiper
    					pagination: {
						    el: '.swiper-pagination',
						},
                    });
                },
                //领取优惠券
                receive_coupon: function(item) {
                	if(item.receive_status == 1) {
                		mui.toast('您已经领取过了');return;
                	}

                	layer.open({
						type: 2,
						shadeClose: false,
					});
					var url =  'seller/receiveCoupon';
					var that = this;
					request(that, {'url': url, 'data': {'id':item.id}}, function(res){
						layer.closeAll();
						mui.toast(res.msg);
						if(res.code == 200) {
							item.receive_status = 1;
						}
					});
                }
			}
		});

		
	</script>
{/block}